<template>
    <div class="info">
        <div class="info-seach">
            <el-row>
                <el-form label-width="80px" size="small">
                    <el-col :span="6">
                        <el-form-item label="访问日期">
                            <el-date-picker
                                class="info-dialog-form"
                                v-model="systemOperateLog.operateDate"
                                type="date"
                                value-format="yyyyMMdd"
                                placeholder="选择日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" v-authCode.show="B_0108" size="mini" @click="getList">确定</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" v-authCode.show="B_0108" size="mini" @click="dialogSearch = true">查询</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" v-authCode.show="B_0109" size="mini" @click="refreshInfo">刷新</el-button>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div class="info-dialog-div">
            <yh-dialog drag title="系统访问日志" :visible.sync="dialogSearch" width="500px">
                <div>
                    <el-form ref="form" label-width="160px" size="mini">
                        <el-form-item label="操作员">
                            <el-input v-model="systemOperateLog.operateUser" class="info-dialog-form" />
                        </el-form-item>
                        <el-form-item label="操作事件">
                            <el-input v-model="systemOperateLog.operateRemark" class="info-dialog-form" />
                        </el-form-item>
                        <el-form-item label="客户端环境">
                            <el-input v-model="systemOperateLog.environment" class="info-dialog-form" />
                        </el-form-item>
                        <el-form-item label="客户端地址">
                            <el-input v-model="systemOperateLog.host" class="info-dialog-form" />
                        </el-form-item>
                        <el-form-item label="浏览器">
                            <el-input v-model="systemOperateLog.browser" class="info-dialog-form" />
                        </el-form-item>
                        <el-form-item label="调用结果">
                            <el-select v-model="systemOperateLog.result" clearable>
                                <el-option class="info-dialog-form" v-for="item in respoenData" :key="item.id" :label="item.name" :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="操作类型">
                            <el-select v-model="systemOperateLog.operateType" clearable>
                                <el-option class="info-dialog-form" v-for="(value, key) in operateTypePojo" :key="key" :label="value" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogSearch = false">
                        取 消
                    </el-button>
                    <el-button size="mini" @click="resetInfo">
                        重置
                    </el-button>
                    <el-button size="mini" type="primary" @click="submitData">确 定 </el-button>
                </div>
            </yh-dialog>
        </div>
        <div class="info-dialog-div" v-loading="detailLoading">
            <yh-dialog drag title="详情" :visible.sync="detailLog" width="700px">
                <el-table ref="multipleTable" :data="detailData" tooltip-effect="dark" style="width: 100%" border size="mini">
                    <el-table-column prop="serialNo" label="序号" width="100" fixed="left"></el-table-column>
                    <el-table-column prop="operateUser" label="操作员" width="150"></el-table-column>
                    <el-table-column prop="operateRemark" label="操作事件" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="requestUrl" label="请求地址" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="environment" label="客户端环境" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="host" label="客户端地址" width="120" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="browser" label="浏览器" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="result" label="调用结果" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="time" label="调用耗时(ms)" width="120"></el-table-column>
                    <el-table-column prop="" label="是否经过认证" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.auth == true ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operateDate" label="访问日期" width="100" align="center">
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row.operateDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operateTime" label="访问时间" width="100" align="center">
                        <template slot-scope="scope">
                            {{ timeFormat(scope.row.operateTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="method" label="请求方式" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="requestParam" label="请求参数" width="200" show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.requestParam" />
                    </template> -->
                    </el-table-column>
                    <el-table-column prop="responseMsg" label="返回信息" width="200" show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.responseMsg" />
                    </template> -->
                    </el-table-column>
                    <el-table-column prop="errorMsg" label="报错信息" width="200" show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.errorMsg" />
                    </template> -->
                    </el-table-column>
                </el-table>
            </yh-dialog>
        </div>
        <div v-loading="loading">
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border size="mini" height="calc(100vh - 150px)">
                <el-table-column prop="serialNo" label="序号" width="100" fixed="left"></el-table-column>
                <el-table-column prop="operateUser" label="操作员" width="150"></el-table-column>
                <el-table-column prop="operateRemark" label="操作事件" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="requestUrl" label="请求地址" show-overflow-tooltip></el-table-column>
                <el-table-column prop="environment" label="客户端环境" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="host" label="客户端地址" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="browser" label="浏览器" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="result" label="调用结果" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column prop="operateType" label="操作类型" width="140" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ operateTypePojo[scope.row.operateType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="调用耗时(ms)" width="120"></el-table-column>
                <el-table-column prop="" label="是否经过认证" width="120">
                    <template slot-scope="scope">
                        {{ scope.row.auth == true ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="operateDate" label="访问日期" width="100" align="center">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.operateDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="operateTime" label="访问时间" width="100" align="center">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.operateTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="method" label="请求方式" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="50">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            icon="el-icon-view"
                            topTitle="查看详情"
                            @on-click="openDialog(scope.row.serialNo)"
                        ></RiskIconButton>
                    </template>
                </el-table-column>
                <!--<el-table-column prop="requestParam" label="请求参数" width="200" show-overflow-tooltip>-->
                <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.requestParam" />
                    </template> -->
                <!--</el-table-column>-->
                <!--<el-table-column prop="responseMsg" label="返回信息" width="200" show-overflow-tooltip>-->
                <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.responseMsg" />
                    </template> -->
                <!--</el-table-column>-->
                <!--<el-table-column prop="errorMsg" label="报错信息" width="200" show-overflow-tooltip>-->
                <!-- <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.errorMsg" />
                    </template> -->
                <!--</el-table-column> -->
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="paging.currentPage"
                :page-size="paging.pageSize"
                layout="total, prev, pager, next"
                :total="paging.total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { paging, selects } from './info-data';
import { timeFormat, dateFormat } from '@/utils/tools';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import XEUtils from 'xe-utils';

@Component({
    name: 'InfoList',
    components: {
        RiskIconButton,
    },
})
export default class InfoList extends Vue {
    private tableData: any;
    private detailData: any;
    timeFormat = timeFormat;
    dateFormat = dateFormat;
    private dialogSearch: boolean = false;
    private detailLog: boolean = false;
    private loading: boolean = false;
    private detailLoading: boolean = false;
    private systemOperateLog: selects = {
        operateUser: '',
        operateRemark: '',
        environment: '',
        operateDate: '',
        operateType: '0',
        host: '',
        browser: '',
        result: '',
    };
    private paging: paging = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
        totalPage: 0,
    };
    private respoenData = [
        {
            name: '成功',
            id: '1',
        },
        {
            name: '失败',
            id: '2',
        },
    ];

    private operateTypePojo = {
        '0': '人为请求',
        '1': '自动刷新请求',
        '2': '系统操作请求',
    };

    created() {
        this.systemOperateLog.operateDate = this.getToday();
        this.getSystemInfo(this.paging, this.systemOperateLog);
    }

    // 获取当天
    private getToday() {
        return XEUtils.toDateString(new Date(), 'yyyyMMdd');
    }

    // 获取数据
    private getSystemInfo(paging: any, systemOperateLog: any): void {
        this.loading = true;
        this.$axios
            .post('/system/query/systemLog', {
                paging: paging,
                systemOperateLog: systemOperateLog,
            })
            .then((res: any) => {
                this.loading = false;
                if (res) {
                    this.tableData = res.list;
                    this.paging.total = res.total;
                    this.paging.totalPage = res.totalPage;
                }
            });
    }

    // 日期单独选值
    private getList(): void {
        this.getSystemInfo(this.paging, this.systemOperateLog);
    }

    // 翻页
    private handleCurrentChange(val: number): void {
        this.paging.currentPage = val;
        this.getSystemInfo(this.paging, this.systemOperateLog);
    }

    // 刷新
    private refreshInfo(): void {
        this.paging.currentPage = 1;
        // let _operateDate = this.getToday();
        // this.systemOperateLog = {
        //     operateUser: '',
        //     operateRemark: '',
        //     environment: '',
        //     operateDate: _operateDate,
        //     operateType: '0',
        //     host: '',
        //     browser: '',
        //     result: '',
        // };
        this.getSystemInfo(this.paging, this.systemOperateLog);
    }

    // 重置
    private resetInfo(): void {
        this.systemOperateLog = {
            operateUser: '',
            operateRemark: '',
            environment: '',
            operateDate: '',
            operateType: '0',
            host: '',
            browser: '',
            result: '',
        };
    }

    // 查询
    private submitData(): void {
        this.dialogSearch = false;
        console.log(this.systemOperateLog.operateType, 'this.systemOperateLog.operateType');
        if (!this.systemOperateLog.operateType) {
            this.systemOperateLog.operateType = '0';
        }
        this.getSystemInfo(this.paging, this.systemOperateLog);
    }

    // 详情弹窗
    private openDialog(ruleId) {
        this.detailLog = true;
        this.detailLoading = true;
        this.$axios.post('/system/query/systemLog/' + ruleId).then((res: any) => {
            if (res) {
                this.detailLoading = false;
                this.detailData = [res];
            }
        });
    }
}
</script>
<style lang="scss" scoped>
.info-dialog-form {
    width: 193px;
    margin-right: 10px;
}
.info {
    padding-top: 10px;
    .info-seach {
        padding: 8px 10px;
        border: 1px solid #eee;
        margin-bottom: 10px;
    }

    .info-dialog-div {
    }
}
</style>
